<template>
  <div>
    <Frame
      class="frame"
      size="middle-1"
      title="历史记录"
      :visible="dialogVisible"
    >
      <template #default>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="火警记录" name="alarm" style="height: calc(100%)">
            <el-table
              :data="alarmData"
              height="calc(100% - 50px)"
              class="table"
              :header-cell-style="headerStyle"
              row-key="id"
              ref="refMultipleTable"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="imei"
                label="设备编码"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="安装点"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="status"
                label="状态"
                min-width="80"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span>
                    {{ getHandleStatusLabel(row.status) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="createTime"
                label="时间"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="management"
                label="操作"
                width="80"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="table-body-item-btn"
                    @click="onEetails(scope.row, '火情')"
                  >
                    <span class="btn-view">查看</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging">
              <Pagination
                :page.sync="alarmPage"
                :limit.sync="alarmLimit"
                :total="alarmTotal"
                :pagerCount="5"
                @pagination="getAlarmList"
                class="pagination"
              >
              </Pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="故障记录"
            name="hiddenDanger"
            style="height: calc(100%)"
          >
            <el-table
              :data="hiddenDangerData"
              height="calc(100% - 50px)"
              class="table"
              :header-cell-style="headerStyle"
              row-key="id"
              ref="refMultipleTable"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="imei"
                label="设备编码"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="spaceName"
                label="安装点"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="status"
                label="状态"
                min-width="80"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span>
                    {{ getRepairStatusLabel(row.status) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="createTime"
                label="时间"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="management"
                label="操作"
                width="80"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="table-body-item-btn"
                    @click="onEetails(scope.row, '故障')"
                  >
                    <span class="btn-view">查看</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging">
              <Pagination
                :page.sync="hiddenDangerPage"
                :limit.sync="hiddenDangerLimit"
                :total="hiddenDangerTotal"
                :pagerCount="5"
                @pagination="getHiddenDangerList"
                class="pagination"
              >
              </Pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="反馈记录"
            name="feedback"
            style="height: calc(100%)"
          >
            <el-table
              :data="feedbackData"
              height="calc(100% - 50px)"
              class="table"
              :header-cell-style="headerStyle"
              row-key="id"
              ref="refMultipleTable"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="deviceCode"
                label="设备编码"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="spaceName"
                label="安装点"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="status"
                label="状态"
                min-width="80"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span>
                    {{ getHandleStatusLabel(row.status) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="createTime"
                label="时间"
                min-width="100"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="management"
                label="操作"
                width="80"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="table-body-item-btn"
                    @click="onEetails(scope.row, '反馈')"
                  >
                    <span class="btn-view">查看</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging">
              <Pagination
                :page.sync="feedbackPage"
                :limit.sync="feedbackLimit"
                :total="feedbackTotal"
                :pagerCount="5"
                @pagination="getFeedbackList"
                class="pagination"
              >
              </Pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="操作记录"
            name="command"
            style="height: calc(100%)"
          >
            <el-table
              :data="dataList"
              height="calc(100% - 50px)"
              class="table"
              :header-cell-style="headerStyle"
              row-key="id"
              ref="refMultipleTable"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="serviceType"
                label="操作名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="createUsername"
                label="操作人"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="commandResult"
                label="指令结果"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <el-tag
                    type="success"
                    size="mini"
                    v-if="row.commandResult == 1"
                    >执行成功</el-tag
                  >
                  <el-tag
                    type="danger"
                    size="mini"
                    v-if="row.commandResult == 2"
                    >执行失败</el-tag
                  >
                  <el-tag
                    type="warning"
                    size="mini"
                    v-if="row.commandResult == 3"
                    >待下发</el-tag
                  >
                  <el-tag
                    type="danger"
                    size="mini"
                    v-if="row.commandResult == 4"
                    >下发失败</el-tag
                  >
                  <el-tag
                    type="success"
                    size="mini"
                    v-if="row.commandResult == 5"
                    >已下发</el-tag
                  >
                  <el-tag
                    type="success"
                    size="mini"
                    v-if="row.commandResult == 6"
                    >已送达</el-tag
                  >
                  <el-tag type="info" size="mini" v-if="row.commandResult == 7"
                    >已取消</el-tag
                  >
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                prop="createTime"
                label="下发时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                align="center"
                prop="management"
                label="操作"
                width="80"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="table-body-item-btn"
                    @click="onEetails(scope.row, '反馈')"
                  >
                    <span class="btn-view">查看</span>
                  </div>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="paging">
              <Pagination
                :page.sync="commandPage"
                :limit.sync="commandLimit"
                :total="commandTotal"
                :pagerCount="5"
                @pagination="CommandPage"
                class="pagination"
              >
              </Pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </Frame>
  </div>
</template>

<script>
import {
  reqAlarmList,
  reqHiddenDangerPage,
  reqFeedbackPage,
  reqProductList,
  reqDetectorProductList,
  reqCommandPage,
} from "@/api/api";
import { mapState } from "vuex";
import Frame from "./frame.vue";
import tableStyleMixin from "@mixin/table-style";

import { handleStatusEnums, repairStatusEnums } from "../enums";
import Pagination from "@components/Pagination.vue";

export default {
  props: ["fcInfo", "deviceCode"],
  components: { Frame, Pagination },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      activeName: "alarm",

      handleStatusList: handleStatusEnums,
      repairStatusList: repairStatusEnums,

      alarmPage: 1,
      alarmLimit: 10,
      alarmTotal: 0,
      alarmData: [],

      hiddenDangerPage: 1,
      hiddenDangerLimit: 10,
      hiddenDangerTotal: 0,
      hiddenDangerData: [],

      feedbackPage: 1,
      feedbackLimit: 10,
      feedbackTotal: 0,
      feedbackData: [],

      dataList: [],
      commandPage: 1,
      commandLimit: 10,
      commandTotal: 0,
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getAlarmList(); //火警
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    async handleClick(tab, event) {
      if (tab.paneName == "alarm") {
        this.getAlarmList(); //火警
      } else if (tab.paneName == "hiddenDanger") {
        this.getHiddenDangerList(); //隐患
      } else if (tab.paneName == "feedback") {
        this.getFeedbackList(); //反馈
      } else if (tab.paneName == "command") {
        this.CommandPage(); //指令列表
      }
    },
    getHandleStatusLabel(status) {
      const item = this.handleStatusList.find((item) => item.value == status);
      return item ? item.label : "";
    },
    getRepairStatusLabel(status) {
      const item = this.repairStatusList.find((item) => item.value == status);
      return item ? item.label : "";
    },
    // 指令列表
    async CommandPage() {
      const res = await reqCommandPage(this.commandPage, this.commandLimit, {
        commandResult: "",
        serviceType: "",
        imei: this.deviceCode,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.commandTotal = res.data.total;
    },
    // 获取告警列表
    async getAlarmList() {
      let res = await reqAlarmList(this.alarmPage, this.alarmLimit, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgId: this.fcInfo.orgId, //机构||单位
        imei: this.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

      this.alarmTotal = res.data.total || 0;
      this.alarmData = res.data.rows || [];
    },
    // 获取隐患列表
    async getHiddenDangerList() {
      let res = await reqHiddenDangerPage(
        this.hiddenDangerPage,
        this.hiddenDangerLimit,
        {
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgId: this.fcInfo.orgId, //机构||单位
          imei: this.deviceCode,
        }
      );
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

      this.hiddenDangerTotal = res.data.total || 0;
      this.hiddenDangerData = res.data.rows || [];
    },

    // 获取反馈列表
    async getFeedbackList() {
      let res = await reqFeedbackPage(this.feedbackPage, this.feedbackLimit, {
        userId: this.user.userId,
        tenantId: this.user.tenantId,
        roleName: this.user.roleName,
        orgId: this.fcInfo.orgId, //机构||单位
        deviceCode: this.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

      this.feedbackTotal = res.data.total || 0;
      this.feedbackData = res.data.rows || [];
    },

    // 查看
    onEetails(data, name) {
      this.$parent.onEetails(data, name);
      this.closeDialog(false);
    },

    // 点击关闭弹框
    closeDialog(show = true) {
      if (show) {
        this.$parent.showShade = false;
      }
      this.dialogVisible = false;
      this.activeName = "alarm";
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");
::v-deep .el-tabs {
  height: 100%;
  // background: pink;
}
::v-deep .el-tabs__content {
  height: calc(100% - 80px);
  // background: skyblue;
}
.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// 导航栏颜色
::v-deep .el-tabs__header {
  background: transparent !important;
}
::v-deep .el-tabs__item {
  color: #989a9e;
  width: 96px;
  text-align: center;
  padding: 0 !important;
}

::v-deep .el-tabs__active-bar {
  background-color: #d2e1fe;
}

::v-deep .el-tabs__item.is-active {
  color: #d2e1fe;
  background: transparent !important;
}

// 导航栏线条颜色
::v-deep .el-tabs__nav-wrap::after {
  background: #225193;
}

// 列表
::v-deep .el-table {
  background: transparent !important;
}
::v-deep .el-table tr {
  background: transparent !important;
}

.table-body-item-btn {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  padding-right: 16px;
  .btn-view {
    background: linear-gradient(
      90deg,
      #2f5da3 0%,
      rgba(47, 93, 163, 0.35) 100%
    );
    box-shadow: inset 0px 3px 10px 1px rgba(47, 93, 163, 0.47);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #658cc7;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #d2e1fe;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 2px;
  }
}

// 分页器
.paging {
  width: 100%;

  ::v-deep .el-pagination {
    height: 50px;
    background: transparent;
  }

  ::v-deep .el-pager {
    background: transparent !important;
  }

  ::v-deep .el-pager li {
    border-radius: 30px;
    // background: #0d2a8c !important;
    // color: #fff;
    background: rgba(16, 58, 95, 0.8) !important; /* 深海蓝 */
    border: 1px solid #2a8bf2 !important; /* 科技蓝边框 */
    color: #e0f2fe !important; /* 浅蓝文字 */
  }

  ::v-deep .el-pager li.active {
    // background: #114683 !important;
    // border: 1px solid #01eafc;
    // box-sizing: border-box;
    // color: #01eafc;
    // box-shadow: inset 0 0 2px rgba(1, 234, 252, 1);
    background: #2a8bf2 !important; /* 高亮科技蓝 */
    color: #001a33 !important; /* 深色文字提升对比度 */
    font-weight: bold;
    box-shadow: 0 0 8px rgba(42, 139, 242, 0.6); /* 发光效果 */
  }

  /* 悬停效果 */
  .el-pager li:hover,
  .el-pagination button:hover {
    background: #1a5f9c !important;
    transform: translateY(-1px);
    transition: all 0.3s;
  }

  /* 总记录数文字 */
  ::v-deep .el-pagination__total {
    color: #a7c4dc !important; /* 浅灰蓝 */
    font-size: 13px;
  }
  /* 页码输入框 */
  .el-pagination .el-input__inner {
    background: rgba(16, 58, 95, 0.5) !important;
    border-color: #2a8bf2 !important;
    color: #fff !important;
  }

  ::v-deep .el-pagination .btn-prev {
    background: #0d2a8c;
  }

  ::v-deep .btn-prev .el-icon {
    color: #fff;
  }

  ::v-deep .el-pagination .btn-next {
    background: #0d2a8c;
  }

  ::v-deep .btn-next .el-icon {
    color: #fff;
  }
}
</style>
